<template>
	<view class="container">
		<view class="btn-area">
			<uv-toast ref="toast"></uv-toast>
			<uni-section title="navigate路由跳转" type="line">
				<uni-card :is-shadow="true">
					<text class="uni-body">跳转方式 open-type: <br>
						navigate 对应 uni.navigateTo 的功能，保留当前页面，跳转到应用内的某个页面<br>
						redirect 对应 uni.redirectTo 的功能，关闭当前页面，跳转到应用内的某个页面<br>
						switchTab对应 uni.switchTab 的功能，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面<br>
						reLaunch 对应 uni.reLaunch 的功能，关闭所有页面，打开到应用内的某个页面<br>
						navigateBack对应 uni.navigateBack 的功能，关闭当前页面，返回上一页面或多级页面<br>
						exit退出小程序，target="miniProgram"时生效</text>
				</uni-card>
				<uni-forms :label-width="150">
					<uni-forms-item label="请选择open-type"
						style="display: flex;justify-content: center;align-items: center;">
						<!-- <uni-data-select :value="openType" :localdata="openTypeArr"></uni-data-select> -->
						<picker mode="selector" :value="index" :range="openTypeArray" @change="changeSelect">
							<view class="uni-input">{{openTypeArray[index]}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="跳转地址">
						<picker :value="pathIndex" :range="pagesPathList" @change="changePathSelect">
							<view class="uni-input">{{pagesPathList[pathIndex]}}</view>
						</picker>
					</uni-forms-item>

					<uni-forms-item label="当前选择路径">
						<!-- <view class="selected-path">{{url}}</view> -->
						<uni-easyinput v-model="url"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>

			</uni-section>


			<navigator :url="url" :open-type="openType" class="navigator-hover">
				<button type="primary">navigator跳转到新页面</button>
			</navigator>

			<button type="primary" @click="navigateTo">uni.Api跳转指定页面</button>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';

	// 导入并解析pages.json获取所有页面路径
	import pagesConfig from '@/pages.json';

	const openTypeArr = ref([{
			"text": "navigate默认路径跳转",
			"value": "navigate"
		},
		{
			"text": "redirect",
			"value": "redirect"
		},
		{
			"text": "switchTab",
			"value": "switchTab"
		},
		{
			"text": "reLaunch",
			"value": "reLaunch"
		},
		{
			"text": "navigateBack",
			"value": "navigateBack"
		},
		{
			"text": "exit",
			"value": "exit"
		}
	])
	const openTypeArray = ref([
		"navigate",
		"redirect",
		"switchTab",
		"reLaunch",
		"navigateBack",
		"exit"
	])

	// 提取所有页面路径
	const extractPagePaths = () => {
		const paths = []
		// 提取pages数组中的path
		if (pagesConfig.pages && Array.isArray(pagesConfig.pages)) {
			pagesConfig.pages.forEach(page => {
				if (page.path) {
					paths.push(page.path)
				}
			})
		}
		// 提取tabBar中的pagePath（避免重复）
		if (pagesConfig.tabBar && pagesConfig.tabBar.list && Array.isArray(pagesConfig.tabBar.list)) {
			pagesConfig.tabBar.list.forEach(tab => {
				if (tab.pagePath && !paths.includes(tab.pagePath)) {
					paths.push(tab.pagePath)
				}
			})
		}
		return paths
	}
	const pagesPathList = ref(extractPagePaths())
	const pathIndex = ref(0)
	const openType = computed(() => {
		return openTypeArray.value[index.value]
	})
	const index = ref(0)
	const url = computed(() => {
		// 根据index从pagesPathList获取对应的路径
		const selectedPath = pagesPathList.value[pathIndex.value] || '';
		// 确保路径格式正确，添加前导斜杠
		return selectedPath.startsWith('/') ? selectedPath : '/' + selectedPath;
	})
	const toast = ref()
	const changeSelect = (val) => {
		const selectedIndex = val.detail.value
		index.value = selectedIndex
	}

	const changePathSelect = (val) => {
		const selectedIndex = val.detail.value
		pathIndex.value = selectedIndex
		// 注意：url现在是计算属性，会自动根据pathIndex更新
	}

	const navigateTo = () => {
		toast.value.show({
			type: 'default',
			title: '默认主题',
			message: `即将跳转页面${url.value}  
					openType: ${openType.value}
			`,
			complete: () => {
				if (openType.value == "navigate") {
					uni.navigateTo({
						url: url.value
					});
				} else if (openType.value == "redirect") {
					uni.redirectTo({
						animationType: "slide-in-right",
						url: url.value
					});
				} else if (openType.value == "switchTab") {
					uni.switchTab({
						animationType: "slide-in-right",
						url: url.value
					});
				} else if (openType.value == "reLaunch") {
					uni.reLaunch({
						animationType: "slide-in-right",
						url: url.value
					});
				} else if (openType.value == "navigateBack") {
					uni.navigateBack({
						animationType: "slide-in-right",
						url: url.value
					});
				} else if (openType.value == "exit") {
					uni.exit({
						animationType: "slide-in-right",
						url: url.value
					});
				}
			}
		})



	}

	onMounted(() => {
		// 在Vue 3中，需要通过.value访问ref引用的组件实例
		// toast.value.show({
		// 	type: 'default',
		// 	title: '默认主题',
		// 	message: "锦瑟无端五十弦"
		// })

		uni.showToast({
			title: "加载完成"
		})
	})
</script>

<style lang="scss" scoped>
	.selected-path {
		padding: 10px;
		background-color: #f5f5f5;
		border-radius: 4px;
		word-break: break-all;
	}

	.container {
		margin: 10px 10px 10px 10px;
	}

	.navigator-hover {
		margin-bottom: 10px;
	}
</style>